<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            height: 90px;
            background-color: #F6F6F6;
            text-align: center;
            position: relative;
        }

        .box>img {
            position: absolute;
            left: 15%;
            top: 20px;



        }

        .box ul {
            display: inline-block;
            list-style-type: none;
            height: 90px;
            
            
            /* position: absolute;
            left: 30%;
            top: 0 */
        }

        .box ul li {
            display: inline-block;
            font-size: 20px;
            line-height: 90px;
        }

        .box ul li:last-child {
            margin-left: 20px;
        }

        .box ul li:nth-of-type(1) img{
            position: absolute;
            top: 0;

        }

.box ul li:last-of-type img:hover{
    animation: xz 0.2s linear;
}


@keyframes xz{
    from{
        transform: rotate(0deg);
    }

    to{
        transform: rotate(360deg);
    }
}
        .box ul li:nth-of-type(3) img{
            position: absolute;
            top: 0;

        }
       

    </style>
</head>

<body>
    <div class="box">
        <img src="./img/logo_170x46.png" alt="">

        <ul>
            <li><img src="./img/header_03.png" alt="">返回商城 &nbsp;|</li>
            <li>商旅频道 &nbsp;|</li>
            <li><img src="./img/header_07.png" alt="">积分商城 &nbsp;|</li>
            <li>商旅频道 &nbsp;|</li>
            <li>了解彩贝 &nbsp;|</li>
            <li>彩贝活动 &nbsp;|</li>
            <li>个人中心 &nbsp;</li>
            <li>
                <img src="./img/iconsB_11.gif" alt="">
                <img src="./img/iconsB_12.gif" alt="">
                <img src="./img/iconsB_13.png" alt="">
            </li>
        </ul>
    </div>
</body>

</html>